import style from "../assets/css/my.module.css";
import Table from "./table";
import { Image, Button, Badge } from "antd-mobile/2x";
import { useState, useEffect } from "react";
import { connect } from "react-redux";

import axios from "axios";
import {
  UnorderedListOutline,
  RightOutline,
  PayCircleOutline,
} from "antd-mobile-icons";
import { useHistory } from "react-router-dom";

const MY = (props) => {
  // 得到history对象
  const history = useHistory();
  const demoSrc = "https://fakeimg.pl/250x100/ededed/";

  const [apply, setApply] = useState([]);
  const [list, setList] = useState([]);

  // 获取Apply
  useEffect(async () => {
    const _hotApply = await axios.post(
      "http://8.136.85.238:3001/api/getAllapply"
    );
    console.log(_hotApply.data.data);
    setApply(_hotApply.data.data.slice(0, 2));
  }, []);

  // 获取list
  useEffect(async () => {
    const _list = await axios.post("http://8.136.85.238:3001/api/getAlllist");
    // console.log(_list.data.data);
    setList(_list.data.data);
  }, []);

  return (
    <>
      <div className={style.main}>
        <div className={style.top}>
          <div className={style.handphoto}>
            <div className={style.photo}>
              <Image
                src={
                  "https://portrait.gitee.com/uploads/avatars/user/3259/9778472_ren-yaqi_1632450006.png!avatar30"
                }
                width={46}
                height={46}
                fit="cover"
                style={{ borderRadius: 32 }}
              />
              <div style={{ marginLeft: "16px", color: "#fff" }}>
                {props.name}
              </div>
            </div>
            <div>
              <UnorderedListOutline fontSize={24} color="#ffffff" />
            </div>
          </div>
        </div>

        <div className={style.body}>
          <div className={style.bdscore}>
            <div className={style.score}>
              <div>{props.score}</div>
              <span>分</span>
            </div>
            <div className={style.state}>
              <div>略显疲态，需要继续优化</div>
            </div>
            <div className={style.button}>
              <Button
                size="middle"
                shape="rounded"
                color="#fff"
                style={{
                  "--text-color": "#00cd8f",
                }}
              >
                一键优化
              </Button>
            </div>
          </div>

          {/* 应用更新 */}
          <div className={style.appUpdata}>
            <div>
              <div>应用更新</div>
              <Button
                size="mini"
                shape="rounded"
                style={{
                  "--text-color": "#fff",
                  fontSize: "12px",
                  "--border-radius": "20px",
                  "--background-color": "#FF411C",
                }}
              >
                26
              </Button>
            </div>

            <div>
              <Image
                src={"https://pp.myapp.com/ma_icon/0/icon_73622_1639568276/96"}
                width={30}
                height={30}
                fit="cover"
                style={{ borderRadius: 8, marginRight: 10 }}
              />
              <Image
                src={"https://pp.myapp.com/ma_icon/0/icon_10910_1635498550/256"}
                width={30}
                height={30}
                fit="cover"
                style={{ borderRadius: 8, marginRight: 10 }}
              />

              <RightOutline />
            </div>
          </div>

          {/* 常用工具 */}
          <div className={style.tools}>
            <div>常用工具</div>
            <div className={style.toolsnavs}>
              <div className={style.toolsnav}>
                <div className={style.tnav}>
                  <Image
                    src={
                      "https://img0.baidu.com/it/u=2165831891,3459105404&fm=26&fmt=auto"
                    }
                    width={40}
                    height={40}
                    fit="cover"
                    style={{ borderRadius: 8 }}
                  />
                  <div className={style.tnavt}>
                    <div>垃圾清理</div>
                    <span>100MB垃圾</span>
                  </div>
                </div>
                <div className={style.tnav}>
                  <Image
                    src={
                      "https://pp.myapp.com/ma_icon/0/icon_10863_1637580216/96"
                    }
                    width={40}
                    height={40}
                    fit="cover"
                    style={{ borderRadius: 8 }}
                  />
                  <div className={style.tnavt}>
                    <div>QQ清理</div>
                    <span>一键放心清理</span>
                  </div>
                </div>
                <div className={style.tnav}>
                  <Image
                    src={
                      "https://img2.baidu.com/it/u=3027945955,2355425362&fm=253&fmt=auto&app=120&f=PNG?w=160&h=160"
                    }
                    width={40}
                    height={40}
                    fit="cover"
                    style={{ borderRadius: 8 }}
                  />
                  <div className={style.tnavt}>
                    <div>安全扫描</div>
                    <span>立即安全扫描</span>
                  </div>
                </div>
              </div>

              <div className={style.toolsnav}>
                <div className={style.tnav}>
                  <Image
                    src={
                      "https://pp.myapp.com/ma_icon/0/icon_10910_1635498550/256"
                    }
                    width={40}
                    height={40}
                    fit="cover"
                    style={{ borderRadius: 8 }}
                  />
                  <div className={style.tnavt}>
                    <div>微信清理</div>
                    <span>100MB垃圾</span>
                  </div>
                </div>
                <div className={style.tnav}>
                  <Image
                    src={
                      "https://img0.baidu.com/it/u=3574789332,2291137910&fm=26&fmt=auto"
                    }
                    width={40}
                    height={40}
                    fit="cover"
                    style={{ borderRadius: 8 }}
                  />
                  <div className={style.tnavt}>
                    <div>大文件清理</div>
                    <span>定期清理文件</span>
                  </div>
                </div>
                <div className={style.tnav}>
                  <Image
                    src={
                      "https://img2.baidu.com/it/u=2044644197,3586400872&fm=26&fmt=auto"
                    }
                    width={40}
                    height={40}
                    fit="cover"
                    style={{ borderRadius: 8 }}
                  />
                  <div className={style.tnavt}>
                    <div>卫星检测</div>
                    <span>北斗卫星扫描</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 专属福利 */}
          <div className={style.zsfl}>
            <div className={style.zsflbt}>
              <PayCircleOutline />
              <div>专属福利</div>
            </div>

            {apply.map((item, index) => (
              <div key={index} className={style.applies}>
                <div className={style.apply}>
                  <img src={item.cover}></img>
                  <div className={style.applyNav}>
                    <div className={style.applyName}>{item.name}</div>
                    <div className={style.applyIntro}>{item.intro}</div>
                  </div>
                </div>
                <div
                  className={style.applyWay}
                  onClick={() => {
                    history.push({ pathname: "Detail" });
                  }}
                >
                  免流下载
                </div>
              </div>
            ))}
          </div>

          {/* 更多功能 */}
          <div className={style.gggn}>
            <div className={style.gggnbt}>
              <div>更多功能</div>
            </div>
            <div className={style.gggnfl}>
              {list.map((item, index) => (
                <div key={index} className={style.nav}>
                  <img src={item.cover}></img>
                  <div className={style.btbn}>{item.name}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className={style.foot}>
          <Table />
        </div>
      </div>
    </>
  );
};
const mapStateToProps = (state) => {
  return state;
};
export default connect(mapStateToProps)(MY);
